<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>background-attachment</title>

        <style type="text/css">
            /* body { margin: 0 ; padding: 0 ; } */
            h3 { text-align: center ; }

            .wrapper { width: 100% ; height: 500px ; line-height: 500px ; text-align: center ; font-size: 200px ;  border: 1px dotted blue ; }

            .odd { background-color: #dedede ; }
            .even { background-color: #ffff00 ; } 

            .second { 
                background-image: url(liuyifei.jpg) ; 
                background-repeat: no-repeat ; 
                background-position: center ;
                background-attachment: scroll ; /* scroll : 元素的背景图像会随着元素滚动而滚动 */
            }

            .fourth { 
                background-image: url(liuyifei.jpg) ; 
                background-repeat: no-repeat ; 
                background-position: center ;
                /* fixed :  背景图像固定在视口中，当元素从视口飘过时，就会显示相应的背景图像 */
                background-attachment: fixed ; 
            }

            .sixth { 
                line-height: 30px ;
                font-size: 20px ;
                background-image: url(liuyifei.jpg) ; 
                background-repeat: no-repeat ; 
                background-position: center ;
                /* local : 背景图片会随着元素内容的滚动而滚动 */
                background-attachment: local ; 
                /* 当 overflow 为 scroll 时会为元素显示滚动条 */
                overflow: scroll ; /* 如果元素内容超出边界，则可以通过滚动条来拖动显示 */
            }

        </style>

    </head>
    <body>

        <h3>background-attachment</h3>

        <div class="wrapper odd first">first</div>

        <div class="wrapper even second">second</div>

        <div class="wrapper odd third">third</div>

        <div class="wrapper even fourth">fourth</div>

        <div class="wrapper odd fifth">fifth</div>

        <div class="wrapper even sixth">
            sixth  <br>
            第六个 <br>
            sixth  <br>
            第六个 <br>
            sixth  <br>
            第六个 <br>
            sixth  <br>
            第六个 <br>
            sixth  <br>
            第六个 <br>
            sixth  <br>
            第六个 <br>
            sixth  <br>
            第六个 <br>
            sixth  <br>
            第六个 <br>
            sixth  <br>
            第六个 <br>
            sixth  <br>
            第六个 <br>
            sixth  <br>
            第六个 <br>
            sixth  <br>
            第六个 <br>
            sixth  <br>
            第六个 <br>
            sixth  <br>
            第六个 <br>
        </div>

        <div class="wrapper odd seventh">seventh</div>
        
    </body>
</html>